.rc-tooltip {
	position: relative;
	--translation-x: -50%;

	&::before,
	&::after {
		position: absolute;
		z-index: 1000;
		bottom: 100%;
		left: 50%;

		transition: all 0.18s ease-out 0.18s;
		transform: translate(var(--translation-x), 10px);
		transform-origin: top;
		pointer-events: none;

		opacity: 0;
	}

	&::after {

		bottom: 100%;

		margin: 11px 0;
		padding: 0.5em 1em;

		content: attr(aria-label) attr(label);
		white-space: nowrap;

		color: var(--tooltip-text-color);
		border-radius: var(--tooltip-radius);
		background: var(--tooltip-background);

		font-size: var(--tooltip-text-size);
	}

	&::before {

		width: 0;
		height: 0;
		margin-bottom: 6px;

		content: "";

		border-width: 6px 6px 0;
		border-style: solid;
		border-color: var(--tooltip-background) transparent transparent transparent;
	}

	&--down {
		&::after {
			top: 100%;
			bottom: initial;
		}

		&::before {
			top: 100%;
			bottom: initial;

			border-width: 6px;
			border-color: transparent transparent var(--tooltip-background)  transparent;
		}
	}

	&--start,
	.rtl &--end {
		--translation-x: -10%;
	}

	&--end,
	.rtl &--start {
		--translation-x: -90%;
	}
}

@media (min-width: 501px) {
	.rc-tooltip[aria-label] {
		&:hover::before,
		&:hover::after,
		&:focus::before,
		&:focus::after {
			transform: translate(var(--translation-x), 0);
			pointer-events: auto;

			opacity: 1;
		}
	}
}
